<template>
  <el-card class="box-card mb-20" :shadow="false">
      <template #header>
        <span class="user-card-title">My account</span>
      </template>
      <div class="user-info-wrap">
        <div class="avatar">
          <img src="@/assets/ipx-proxy_user-01.png" />
        </div>
        <el-descriptions class="margin-top" :column="1">
          <el-descriptions-item>
            <template #label>
              <i class="el-icon"><Key /></i>User ID:
            </template>
            <span>{{ getUserInfo.id || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon"><User /></i>User name:
            </template>
            <span>{{ getUserInfo.email || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon"><Calendar /></i>Create time:
            </template>
            <span>{{ getUserInfo.created_at || '-' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <el-card class="box-card mb-20" :shadow="false">
      <template #header>
        <span class="user-card-title">Change Password</span>
      </template>
      <el-form size="large" :model="pwdForm" :rules="rules" ref="pwdFormRef" label-width="180px" class="change-pwd-wrap">
        <el-form-item label="Current Password" prop="password">
          <el-input type="password" v-model="pwdForm.password" autocomplete="off" placeholder="Please enter password" style="width: 440px" />
        </el-form-item>
        <el-form-item label="New Password" prop="new_password">
          <el-input type="password" v-model="pwdForm.new_password" autocomplete="off" placeholder="Please enter password" style="width: 440px" />
        </el-form-item>
        <el-form-item label="Confirm New Password" prop="new_password_confirmation">
          <el-input type="password" v-model="pwdForm.new_password_confirmation" autocomplete="off" placeholder="Please enter password" style="width: 440px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onSubmit(pwdFormRef)">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { changePassApi } from '@/api/index';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    result: Object;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
  }>();

  const loading = ref(false);
  const pwdFormRef = ref<FormInstance>();
  const pwdForm = reactive({
    password: '',
    new_password: '',
    new_password_confirmation: '',
  });
  const rules = reactive<FormRules>({
    password: [{ required: true, message: 'Please enter password', trigger: 'change' }],
    new_password: [{ required: true, message: 'Please enter password', trigger: 'change' }],
    new_password_confirmation: [{ required: true, message: 'Please enter password', trigger: 'change' }],
  });

  const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        onPwdCreate();
      }
    });
  };

  const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };

  const onPwdCreate = async () => {
    if (loading.value) return false;
    loading.value = true;
    changePassApi(pwdForm)
      .then((res) => {
        loading.value = false;
        if (res.errcode == 0) {
          ElMessage.success(res.message || res.errmsg);
          // pwdFormRef.value.resetFields();
          // nextTick(() => {
          //   pwdFormRef.value.clearValidate();
          // });
          sessionStorage.removeItem('token');
          sessionStorage.removeItem('userInfo');
          toLogin();
        } else {
          ElMessage.error(res.message || res.errmsg);
        }
      })
      .catch((err) => {
        console.log('err', err);
        loading.value = false;
        ElMessage.error(err.message);
      });
  };

  const toLogin = () => {
    router.push({
      path: '/user/login',
      query: {
        t: new Date().getTime(),
      },
    });
  };

  onMounted(() => {});
</script>

<style scoped lang="scss"></style>
